<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="visible"
      @close="onClose"
      width="70%">
      <div>
        <el-row>
        <el-col :span="6" style="margin-bottom:10px">【题型】：
          <span v-if="dirName !== ''">{{randomPreview.questionType | matchQuestionType}}</span>
        </el-col>
        <el-col :span="6" style="margin-bottom:10px">【编号】：
          {{randomPreview.id}}
        </el-col>
        <el-col :span="6" style="margin-bottom:10px">【难度】：
          <span v-if="dirName !== ''">{{randomPreview.difficulty | matchDifficulty}}</span>
          <!-- {{randomPreview.difficulty | matchDifficulty}} -->
        </el-col>
        <el-col :span="6" style="margin-bottom:10px">【标签】：
          {{randomPreview.tags}}
        </el-col>
        <el-col :span="6" style="margin-bottom:10px">【学科】：
          {{subName}}
        </el-col>
        <el-col :span="6" style="margin-bottom:10px">【目录】：
          {{dirName}}
        </el-col>
        <el-col :span="6" style="margin-bottom:10px">【方向】：
          {{randomPreview.direction}}
        </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col style="margin-bottom:5px">
            【题干】：
          </el-col>
          <el-col style="margin-bottom:5px">
            <div v-html="randomPreview.question" style="color:blue"></div>
            <!-- {{randomPreview.question}} -->
          </el-col>
        </el-row>
        <el-row>
          <el-col style="margin-bottom:20px" v-if="randomPreview.questionType !== '3'">
            <span v-if="dirName !== ''">{{randomPreview.questionType | matchQuestionType}}题</span>
            选项：（以下选中的选项为正确答案）
          </el-col >
          <!-- 多选 -->
          <el-checkbox-group v-model="checkList" v-if="randomPreview.questionType === '2'">
            <el-row>
              <el-checkbox
                style="width:100%;margin-bottom:20px"
                :checked="item.isRight=== 1 ? true : false"
                v-for="item in randomPreview.options"
                :key="item.id"
                :label="item.title"
              ></el-checkbox>
            </el-row>
          </el-checkbox-group>
          <!-- 单选 -->
          <el-radio-group v-model="radio" v-if="randomPreview.questionType === '1'">
            <el-radio
              style="width:100%;margin-bottom:20px"
              v-for="item in randomPreview.options"
              :key="item.id"
              :label="item.title"
              >
            </el-radio>
          </el-radio-group>
        </el-row>
        <hr>
        <el-row>
          <el-col>【参考答案】：<el-button type="danger" @click="showVideo = true">视频答案预览</el-button></el-col>
          <el-col v-if="showVideo">
            <video controls muted autoplay style="width: 60%; height: 100%">
              <meta name="referrer" content="never" />
              <source :src="randomPreview.videoURL" type="video/mp4" />
            </video>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col>
            【答案解析】：<div v-html="randomPreview.answer" style="display:inline-block;"></div>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col>【题目备注】：{{randomPreview.remarks}}</el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose" type="primary" style="margin-left:800px">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail as randomsDetail } from '@/api/hmmm/questions'
import { detail as subjectsDetail } from '@/api/hmmm/subjects'
import { detail as directorysDetail } from '@/api/hmmm/directorys'
import { questionType, difficulty } from '@/api/hmmm/constants'

export default {
  data () {
    return {
      randomPreview: {}, // 获取数据
      showVideo: false, // 是否展示视频
      checkList: [], // 多选已选中选项
      radio: '', // 单选选中项
      subId: 0, // 学科id
      subName: '', // 学科名
      dirId: 0, // 目录id
      dirName: '' // 目录名
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  created () {
    this.getRandomsDetail()
  },
  filters: {
    // 题型数据转换
    matchQuestionType (val) {
      // val 是一个字符串
      const value = questionType.find(item => {
        return item.value - 0 === (val - 0)
      })
      return value.label
    },
    matchDifficulty (val) {
      // val 是一个字符串
      const value = difficulty.find(item => {
        return item.value - 0 === (val - 0)
      })
      return value.label
    }
  },
  methods: {
    onClose () {
      this.$emit('update:visible', false)
      this.$emit('close')
      // this.$message.success('弹框已关闭')
      // this.randomPreview = {}
      // console.log(this.randomPreview)
    },
    // 根据id发送请求获取数据
    async getRandomsDetail () {
      const res = await randomsDetail({
        id: this.id
      })
      this.randomPreview = res.data
      if (this.randomPreview.questionType === '1') {
        const arr = this.randomPreview.options
        arr.forEach(item => {
          if (item.isRight === 1) {
            this.radio = item.title
          }
        })
      }
      this.subId = this.randomPreview.subjectID
      this.dirId = this.randomPreview.catalogID
      if (this.subId !== 0) {
        this.getSubjectsName()
      }
      if (this.dirId !== 0) {
        // console.log(this.dirId)
        this.getCatalogIDName()
      }
    },
    // 学科id转换成学科名
    async getSubjectsName () {
      const res = await subjectsDetail({
        id: this.subId
      })
      // console.log(res)
      this.subName = res.data.subjectName
    },
    // 目录id转换成目录名
    async getCatalogIDName () {
      const res = await directorysDetail({
        id: this.dirId
      })
      // console.log(res)
      this.dirName = res.data.directoryName
    }

  }
}
</script>

<style scoped lang='less'>

</style>
